var index = {
	init: function() {
		this.bindEvent();
		this.getList();
	},

	bindEvent: function() {
		// 需要事件托管
		//		$('.add').on('click', function() {
		//			alert('add');
		//		});

		// 绑定添加到购物车事件
		$('#prd-list').on('click', '.add', function() {
			// 阻止冒泡
			event.stopPropagation();
			// index.addCar(event.target);
			index.addCar(this);
		});

		// 绑定全选事件
		$('#total').on('click', function() {
			index.selectAll();
		});
		// 绑定商品选中事件
		$('#order-list').on('click', '.checkbox', function() {
			// 阻止冒泡
			event.stopPropagation();
			index.selectPrd();
		});
		// 绑定跳转到详情事件
		$('body').on('click', '.prd-item', function() {
			var id = $(this).data('id');
			index.toDetail(id);
		});
		// 绑定跳转到详情事件
		$('body').on('click', '.order', function() {
			// 点击的不是label才跳转到详情
			if(event.target.className !== 'label') {
				index.toDetail();
			}
		});

	},

	render: function(data) {
		var htmlStr = '';
		var item;
		for(var i = 0; i < data.length; i++) {
			item = data[i];
			// 把数据放到li上,供后面使用
			htmlStr += `
			<li 
				data-id="${item.id}"
				data-price="${item.price}"
				data-prdName="${item.prdName}"
				class="prd-item rel mg-top-xl">
				<div class="img-box">
					<img class="img" src="${item.imgUrl}">
				</div>
				<p class="lh-xl">¥ <span class="price">${item.price.toFixed(2)}</span> 包邮</p>
				<p class="disc lh-xl">${item.prdName} ${item.disc}</p>
				<p class="store lh-xl">${item.store}</p>
				<img class="add abs" src="img/add.png" />
			</li>`;
		}
		// $('#prd-list').html(htmlStr);
		$('#fixed').before(htmlStr);
	},

	// 添加到购物车
	addCar: function(ele) {
		// ele是原生对象
		// 隐藏空提示信息
		$('#empty').hide();
		// 获取id
		var $li = $(ele).closest('li');
		var id = $li.data('id');
		var prdName = $li.data('prdname');
		var price = $li.data('price');
		var $orderLi = $(`#order-list [data-id=${id}]`);
		// 已添加
		if($orderLi.length > 0) {
			// 通过父元素查找子元素
			var $num = $orderLi.find('.num');
			// 获取数量
			var num = $num.text();
			$num.text(++num);
			// 修改单个商品的总价
			var $price = $orderLi.find('.price span').text((price * num).toFixed(2));
			// 修改所有商品的总价

		} else {
			// 新添加
			var htmlStr = `
			<li class="order" data-id="${id}">
				<input class="checkbox" type="checkbox" id="${id}" />
				<label class="label" for="${id}"></label>
				<span class="prd">${prdName}  <span>X<span class="num">1</span></span></span>
				<span class="fr price">￥<span>${price.toFixed(2)}</span></span>
			</li>
			`;
			// 添加订单
			$("#order-list").append(htmlStr);
		}
		// 判断是否全选
		this.selectPrd();
	},

	// 跳转到详情
	toDetail: function(id) {
		// sessionStorage.setItem('id',id);
		location.href = 'detail.html?id=' + id;
	},

	selectPrd: function() {
		// 选中的时候,算总价
		this.getTotalMoney();
		// 如果所有商品被选中,全选按钮也需要被选中
		var isSelectAll = $('#order-list input:checked').length === $('#order-list input').length;
		$('#total').prop('checked', isSelectAll);
	},

	// 全选事件
	selectAll: function() {
		// 获取全选按钮的状态,是被选中还是不被选中
		var isChecked = $('#total').prop('checked');
		$('#order-list .checkbox').prop('checked', isChecked);
		this.getTotalMoney();
	},

	/**
	 * 计算总价
	 * 把所有商品的价格加起来
	 */
	getTotalMoney: function() {
		// 获取所有商品价格的标签
		var $prices = $('#order-list input:checked');
		var sum = 0;
		for(var i = 0; i < $prices.length; i++) {
			// 通过input标签查找.price标签,先找到其父元素,再通过父元素找到.price标签
			var $money = $($prices[i]).closest('li').find('.price span');
			var money = $money.text();
			sum += Number(money);
		}
		$('#total-money').text(sum.toFixed(2));
	},

	getList: function() {
		// var url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
		var url = 'json/phoneList.json';
		var data = {};
		// 发送请求前开启loading
		common.loadingBegin();
		$.ajax({
			type: "get",
			url: url,
			data: data,
			success: function(res) {
				// console.log(res);
				index.render(res.data.list);

			},
			error: function() {
				alert('请求失败');

			},
			complete: function() {
				common.loadingFinish();
			}
		});
	}
}

index.init();